<!--
	开发者:宋成恩
	开发时间:2017-7-8
	修改时间:2017-7-8
	功能:个人用户修改简历中的基本信息,单独的表单组件 ../PersonResume.vue中调用
 -->
<template>
  <div id="resumePersonalForm">
    <el-form :model="basicInfo" :rules="basicInfoRules" ref="basicInForm" label-width="120px">
      <el-row>
        <el-col :span="7">
          <el-form-item label="真实姓名" prop="real_name">
            <el-input v-model="basicInfo.real_name" size="small" style="width:100%"></el-input>
          </el-form-item>
          <el-form-item label="民族" prop="nation">
            <el-select v-model="basicInfo.nation" placeholder="请选择" style="width: 100%;" size="small">
              <el-option v-for="(item, index) in nationList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻状况" prop="marriage">
            <el-select v-model="basicInfo.marriage" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in marriageList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="basicInfo.sex" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in sexList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最高学历" prop="end_education">
            <el-select v-model="basicInfo.end_education" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in educationList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="政治面貌" prop="political">
            <el-select v-model="basicInfo.political" size="small" style="width: 100%;">
              <el-option v-for="(optionitem,index) in politicalList" :key="index" :label="optionitem.label"
                         :value="optionitem.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="出生日期" prop="birthday" required>
            <el-date-picker v-model="basicInfo.birthday" type="date" size="small" placeholder="选择出生日期"
                            :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="工作时间" prop="work_start_date" required>
            <el-date-picker v-model="basicInfo.work_start_date" type="date" size="small" placeholder="选择参加工作的时间"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="QQ号" prop="qq">
            <el-input v-model="basicInfo.qq" size="small" style="width:100%"></el-input>
          </el-form-item>
          <!-- <el-form-item label="身高" prop="height">
                        <el-input-number :controls="false" v-model="basicInfo.height" size="small" style="width: 100%;"></el-input-number>
                    </el-form-item> -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="现居住地" prop="livings">
            <!-- <el-input v-model="basicInfo.living" size="small" style="width:100%"></el-input> -->
            <el-cascader change-on-select v-model="basicInfo.livings" :options="placeList" style="width: 100%"
                         :props="prop"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="户口所在地" prop="native_places">
            <!-- <el-input v-model="basicInfo.native_place" size="small" style="width:100%"></el-input> -->
            <el-cascader change-on-select v-model="basicInfo.native_places" :options="placeList" style="width: 100%"
                         :props="prop"></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="自我评价" prop="evaluation">
        <el-input type="textarea" :autosize="{ minRows: 3}" v-model="basicInfo.evaluation" size="small"
                  style="width:85%"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-button type="info" size="large" @click="checkBasicInfoData">保存</el-button>
      <el-button type="info" size="large" @click="cancelBasicInfoEdit">取消</el-button>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../../assets/js/post.js'
  import { formatterTime } from '../../../assets/js/common.js'
  import { getStaticMapList } from '../../../assets/js/GlobeDefine.js'
  import { province } from '@/assets/js/placeList.js'

  export default {
    name: '',
    props: ['resumeId'],
    data () {
      var checkDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('时间不能为空'))
        } else {
          callback()
        }
      }
      var checkWorkStartDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('工作时间时间不能为空'))
        } else {
          let time = new Date().getFullYear()
          let lasttime = new Date(value).getFullYear()
          this.work_years = parseInt((time - lasttime))
          if (this.work_years >= 0) {
            callback()
          } else {
            callback(new Error('请正确选择工作时间！'))
          }
        }
      }
      return {
        placeList: province(),
        basicInfo: {
          real_name: '',
          sex: 0,
          birthday: '',
          nation: '', //民族
          native_place: '',//户口所在地
          native_places: [],//户口所在地
          living: '',//现住地
          livings: [],//现住地
          work_start_date: '',//参加工作时间
          marriage: 0, //婚姻状态
          political: 0, //政治面貌
          evaluation: '',//自我评价
          end_education: 0,//最高学历
          height: 0,//身高
          qq: ''
        },
        basicInfoRules: {
          real_name: [
            {required: true, message: '请填写您的真实姓名', trigger: 'blur'},
            {min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'change'}
          ],
          sex: [
            {type: 'number', required: true, message: '请选择您的性别', trigger: 'blur'}
          ],
          birthday: [
            {validator: checkDate, trigger: 'change'},
            {validator: checkDate, trigger: 'blur'}
          ],
          nation: [
            {required: true, message: '请选择您的民族', trigger: 'blur'}
          ],
          native_places: [
            {type: 'array', required: true, message: '请选择您的户口所在地', trigger: 'blur'}
          ],
          qq: [
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'change'}
          ],
          livings: [
            {type: 'array', required: true, message: '请选择您的现居住地', trigger: 'blur'}
          ],
          work_start_date: [
            {validator: checkWorkStartDate, trigger: 'change'},
            {validator: checkWorkStartDate, trigger: 'blur'}
          ],
          end_education: [
            {type: 'number', required: true, message: '请选择您的学历', trigger: 'blur'}
          ]
        },
        nationList: [],
        marriageList: [],
        sexList: [],
        politicalList: [],
        educationList: [],
        prop: {
          value: 'label',
          label: 'label'
        },
        pickerOptions: {
          disabledDate (time) {
            return Date.now() - 8.64e7 < time.getTime()
          }
        },
      }
    },
    created () {
      this.getComboboxList()
      this.getBasicInfo()
    },
    methods: {
      getComboboxList () {
        this.sexList = getStaticMapList('sex')
        this.politicalList = getStaticMapList('political')
        this.educationList = getStaticMapList('education')
        this.marriageList = getStaticMapList('marriage')
        let _this = this
        postDataToServer('NATION_LISTALL').then((data) => {
          if (data.status === 0) {
            _this.nationList = data.data_list
          }
        })
      },
      getBasicInfo () {
        let _this = this
        let parameter = new Object()
        parameter.resume_id = this.resumeId
        postDataToServer('HM_RESUME_PERSONAL_GET', parameter).then((data) => {
          if (data.status === 0) {
            _this.basicInfo = data.data_list
            if ('living' in _this.basicInfo) {
              _this.basicInfo.livings = _this.basicInfo.living.split('/')
            }
            if ('native_place' in _this.basicInfo) {
              _this.basicInfo.native_places = _this.basicInfo.native_place.split('/')
            }
          }
        })
      },
      checkBasicInfoData () {
        let _this = this
        this.$refs['basicInForm'].validate((valid) => {
          if (valid) {
            _this.saveBasicInfo()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })

          }
        })
      },
      saveBasicInfo () {
        let _this = this
        let living = this.basicInfo.livings
        let native_places = this.basicInfo.native_places
        this.basicInfo.native_place = this.basicInfo.native_places.join('/')
        this.basicInfo.living = this.basicInfo.livings.join('/')
        delete this.basicInfo.livings
        delete this.basicInfo.native_places
        this.basicInfo.birthday = formatterTime('date', this.basicInfo.birthday)
        this.basicInfo.work_start_date = formatterTime('date', this.basicInfo.work_start_date)
        postDataToServer('HM_RESUME_PERSONAL_EDIT', this.basicInfo).then((data) => {
          if (data.status === 0) {
            _this.$emit('sendEditBasicInfoStatus', 'success')
          } else {
            _this.getBasicInfo()
            _this.$message.error(data.message)
          }
        })
      },
      cancelBasicInfoEdit () {
        this.$emit('sendEditBasicInfoStatus', 'cancel')
      }
    }
  }
</script>

<style scoped>
  .btn-box {
    width: 90%;
    text-align: center;
  }
</style>
